<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
		:type="!showDetail ? 'list' : 'hide'"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="auto"
			>
				<el-form-item :label="`${$t('merchant.merchant_name')}:`">
					<el-select
						v-model="queryData.merchantId"
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
						clearable
						style="width:210px"
					>
						<el-option
							v-for="item in merchantOptionList"
							:key="item.id"
							:label="item.merchantName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select
						v-model="queryDateType"
						size="medium"
						style="width:130px"
					>
						<el-option
							:label="`${$t('merchant.apply_time')}`"
							value="1"
						></el-option>
						<el-option
							:label="`${$t('merchant.apply_complete_time')}`"
							value="2"
						></el-option>
					</el-select>
					<el-date-picker
						v-model="searchTime"
						:default-time="defaultTime"
						:end-placeholder="$t('merchant.end_time')"
						:picker-options="pickerShortcut2"
						:start-placeholder="$t('merchant.start_time')"
						align="right"
						format="yyyy-MM-dd HH:mm:ss"
						range-separator="-"
						size="medium"
						type="datetimerange"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<div style="display: flex">
						<el-select
							v-model="queryAutorType"
							size="medium"
							style="width:130px"
						>
							<el-option
								:label="$t('merchant.applicant')"
								value="1"
							></el-option>
							<el-option
								:label="$t('merchant.auditor')"
								value="2"
							></el-option>
						</el-select>
						<el-input
							v-model.trim="autor"
							:placeholder="$t('common.please_enter')"
							clearable
							size="medium"
							@keyup.enter.native="enterSearch"
						></el-input>
					</div>
				</el-form-item>
				<el-form-item :label="`${$t('merchant.apply_status')}:`">
					<el-select
						v-model="queryData.auditStatus"
						:placeholder="$t('common.all')"
						:popper-append-to-body="false"
						clearable
						style="width:210px"
					>
						<el-option
							v-for="item in auditStatusType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('merchant.lock_status')">
					<el-select
						v-model="queryData.lockStatus"
						:placeholder="$t('common.all')"
						:popper-append-to-body="false"
						clearable
					>
						<el-option
							v-for="item in lockOrderType"
							:key="item.code"
							:label="item.description"
							:value="Number(item.code)"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						:disabled="loading"
						icon="el-icon-search"
						size="medium"
						type="primary"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						:disabled="loading"
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				:data="dataList"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
			>
				<el-table-column
					align="center"
					:label="$t('merchant.lock')"
					width="60"
					fixed
				>
					<template slot-scope="scope">
						<el-checkbox
							v-if="
								hasPermission('802011') &&
									Number(scope.row.auditStatus) !== 2 &&
									Number(scope.row.auditStatus) !== 3
							"
							v-model="scope.row.lockOrder"
							:disabled="
								Number(scope.row.lockStatus) === 1 &&
									scope.row.auditName !== name
							"
							@change="lockChange(scope.row)"
						></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('common.actions')"
					align="center"
					prop="auditStep"
					min-width="200"
				>
					<template slot-scope="scope">
						<el-button
							v-if="
								hasPermission('802012') &&
									Number(scope.row.auditStatus) !== 2 &&
									Number(scope.row.auditStatus) !== 3
							"
							:class="scope.row.auditName !== name ? 'dis' : ''"
							size="medium"
							type="primary"
							@click="goDetail(scope.row)"
						>
							{{ $t('merchant.apply') }}
						</el-button>
						<el-button
							v-if="
								hasPermission('802013') &&
									Number(scope.row.auditStatus) !== 0 &&
									Number(scope.row.auditStatus) !== 1
							"
							size="medium"
							type="success"
							@click="goDetail(scope.row)"
						>
							{{ $t('merchant.lock_over') }}
						</el-button>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.apply_no')"
					:show-overflow-tooltip="true"
					align="center"
					prop="auditNum"
					width="180px"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.auditNum || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.apply_time')"
					:show-overflow-tooltip="true"
					align="center"
					prop="createdAt"
					width="160"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.applicant')"
					:show-overflow-tooltip="true"
					align="center"
					prop="createdBy"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.merchant_name')"
					:show-overflow-tooltip="true"
					align="center"
					prop="merchantName"
					width="180px"
				>
					<template slot="header">
						{{ $t('merchant.merchant_name') }}
						<br />
						{{ $t('merchant.merchant_level') }}
					</template>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
						<br />
						<span>
							{{ scope.row.merchantLevelName || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.merchant_code')"
					:show-overflow-tooltip="true"
					align="center"
					prop="merchantCode"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.merchantCode || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.apply_remark')"
					:show-overflow-tooltip="true"
					align="center"
					prop="applyRemark"
					width="180px"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.applyRemark || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.apply_status')"
					align="center"
					width="150"
				>
					<template slot-scope="scope">
						<span
							:class="
								Number(scope.row.auditStatus) === 0
									? 'deleteRgba'
									: Number(scope.row.auditStatus) === 1
									? 'lockingRgba'
									: Number(scope.row.auditStatus) === 2
									? 'normalRgba'
									: 'disableRgba'
							"
						>
							{{
								typeFilter(
									scope.row.auditStatus,
									'merchantAuditStatus'
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.lock_time')"
					align="center"
					prop="lockDatetime"
					width="160"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.lockDatetime || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.apply_complete_time')"
					align="center"
					prop="auditDatetime"
					width="160"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.auditDatetime || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.auditor')"
					align="center"
					prop="auditName"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.auditName || '-' }}</span>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:pager-count="9"
				:total="total"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<template slot="nonListContent">
			<addDetail
				:type="type"
				:rowData="rowData"
				@goBack="goBack"
			></addDetail>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getUsername } from '@/utils/auth'
import { routerNames } from '@/utils/consts'
import {
	merchantAuditListApi,
	merchantAuditLockApi
} from '@/api/merchant/merchant-manage/merchange-review'

import MainContent from '@/components/MainContent/index.vue'
const setSearchTime = () => [
	dayjs()
		.subtract(0, 'day')
		.startOf('day'),
	dayjs()
		.subtract(0, 'day')
		.endOf('day')
]
export default {
	name: routerNames.addMerchantReview,
	components: {
		addDetail: () => import('./components/addDetail'),
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			merchantOptionList: [],
			queryDateType: '1',
			queryAutorType: '1',
			autor: undefined,
			queryData: {
				merchantId: undefined,
				auditStatus: undefined,
				lockStatus: undefined
			},
			name: '',
			type: true,
			showDetail: false,
			searchTime: setSearchTime(),
			rowData: {},
			now: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
			dataList: []
		}
	},
	computed: {
		auditStatusType() {
			return this.globalDics.merchantAuditStatus || []
		},
		lockOrderType() {
			return this.globalDics.lockStatus || []
		}
	},
	mounted() {
		this.name = getUsername()
	},
	methods: {
		// 获取列表数据
		loadData() {
			this.loading = true
			const type = this.queryDateType
			const autorType = this.queryAutorType
			const [startTime, endTime] = this.searchTime || []
			let params = {
				...this.queryData,
				auditName: autorType === '2' ? this.autor : undefined,
				createdBy: autorType === '1' ? this.autor : undefined,
				createdAtStart:
					type === '1' && startTime
						? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
						: undefined,
				createdAtEnd:
					type === '1' && endTime
						? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
						: undefined,
				auditDatetimeStart:
					type === '2' && startTime
						? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
						: undefined,

				auditDatetimeEnd:
					type === '2' && endTime
						? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
						: undefined
			}
			params = {
				...this.getParams(params)
			}
			merchantAuditListApi(params)
				.then((res) => {
					if (res?.code === 200) {
						this.loading = true
						this.now = dayjs(new Date()).format(
							'YYYY-MM-DD HH:mm:ss'
						)
						const { record, totalRecord } = res.data || {}
						this.dataList = Array.isArray(record) ? record : []
						this.merchantOptionList = res.data.summary
						if (this.dataList.length) {
							this.dataList.forEach((item) => {
								item.lockOrder = Number(item.lockStatus) === 1
							})
						}
						this.total = totalRecord || 0
						this.loading = false
					} else {
						this.loading = false
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 锁单状态
		async lockChange(val) {
			try {
				this.loading = true
				await merchantAuditLockApi({
					id: val.id,
					lockStatus: Number(val.lockStatus) === 0 ? 1 : 0
				})
				this.$message({
					type: 'success',
					message: this.$t('common.action_success')
				})
				await this.loadData()
			} catch (e) {
				this.loading = false
			}
		},
		// 查看详情
		goDetail(row) {
			this.type =
				Number(row.lockStatus) === 1 && row.auditName === this.name

			this.rowData = row
			this.showDetail = true
		},
		goBack() {
			this.dataList = []
			this.showDetail = false
			this.loadData()
		},
		reset() {
			this.queryDateType = '1'
			this.queryAutorType = '1'
			this.autor = undefined
			this.queryData = {
				merchantId: undefined,
				auditStatus: undefined,
				lockStatus: undefined
			}
			this.searchTime = setSearchTime()
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}

::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
}
</style>
